<template>
  <div>
    <div class="background">
      <div class="login-container">
        <div class="picture-container">
          <img src="~@/assets/login-picture1.svg" alt="">
          <img src="~@/assets/login-picture2.svg" alt="">
          <img src="~@/assets/login-picture3.svg" alt="">
          <img src="~@/assets/login-picture4.svg" alt="">
        </div>
        <div class="input-container">
          <div class="welcome-login">
            <img src="~@/assets/welcome-login.svg" alt="欢迎登录">
          </div>
          <div class="login-method-container">
            <div class="login-method">账号密码登录</div>
            <div class="underscore"></div>
          </div>
          <div class="login-form">
            <div>
              <el-input
                  class="username"
                  v-model="loginForm.username"
                  placeholder="请输入个人用户名"
                  :prefix-icon="avatar"
                  clearable
              >
              </el-input>
            </div>
            <div>
              <el-input
                  class="password"
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  :prefix-icon="lock"
                  clearable
              ></el-input>
            </div>
          </div>
          <div>
            <el-button
                type="primary"
                class="login-button"
                @click="login">登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Avatar, Lock} from '@element-plus/icons-vue'
import {messageElMessage} from "@/utils/tips"
import {login} from "@/network/login";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  data() {
    return {
      // 用户名和密码
      loginForm: {
        username: null,
        password: null
      },
      avatar: Avatar,
      lock: Lock,
      avatarURL: null
    }
  },
  methods: {
    login() {
      if (!this.loginForm.username || !this.loginForm.password) {
        messageElMessage("请输入用户名和密码的正确格式", 'warning')
        return
      }
      login(this.loginForm.username, this.loginForm.password)
        .then(res => {
          if (res.status !== 200 || res.data.status !== 1) {
            messageElMessage("账号或密码错误", 'error')
            return
          }
          window.sessionStorage.setItem('username', res.data.data.username)
          window.sessionStorage.setItem('avatarURL', res.data.data.picture)
          window.sessionStorage.setItem('account', res.data.data.account)
          messageElMessage("登录成功", 'success')
          this.$router.replace('/')
        })
        .catch(() => {
          messageElMessage("登录失败", 'error')
        })
    }
  }
}
</script>

<style scoped>
.background {
  width: 100vw;
  height: 100vh;
  /*position: relative;*/
  background-image: url("../assets/login-background.svg");
  display: flex;
}

.login-container {
  width: 80%;
  height: 80%;
  margin: auto;
  background-color: #ffffff;
  display: flex;
  /*justify-content: space-between;*/
}

.picture-container {
  /*border: 1px solid red;*/
  flex: 1;

}
.picture-container > img {
  width: 40%;
  height: 40%;
  margin-top: 30px;
  margin-right: 15px;
}

.input-container {
  /*border: 1px solid red;*/
  flex: 1;

}

.welcome-login {
  margin-top: 30px;
  margin-bottom: 65px;
}

.login-method-container {

}

.login-method {
  color: #0054FE;
  font-size: 18px;
}

.underscore {
  width: 110px;
  margin: 23px auto;
  background-color: #0054FE;
  border: 1px solid #0054FE;
}

.username, .password {
  width: 385px;
  height: 40px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.login-button {
  width: 385px;
  height: 50px;
  margin-top: 20px;
}

</style>